<template xmlns:v-clipboard="http://www.w3.org/1999/xhtml">
  <div class="vote">
    <div class="vote-title"><span> &lt;{{$t("vo.home")}}</span> <span>&lt;{{$t("vo.account")}}</span><span>&lt;{{$t("vo.datxWallet")}}</span>{{$t("vo.voteTitle")}}</div>
    <div class="vote-header flex">
      <div class="flex">
        <div class="nav">
          <span>{{$t("vo.myDatx")}}</span><br>
          <span>{{allDatx}}</span>
        </div>
        <div class="nav">
          <span>{{$t("vo.redeemDatx")}}</span><br>
          <span>{{resource.totalResource}}</span>
        </div>
      </div>
      <div style="flex:1;"></div>
      <div class="navbut"><button @click="voteAdd">{{$t("vo.vote")}}</button></div>
    </div>
    <div class="table">
      <div class="table-title">{{$t("vo.voteDetail")}}</div>
      <el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop=""
          label=""
          width="20">
        </el-table-column>
        <el-table-column
          prop="type"
          :label="this.$t('vo.type')"
         >
        </el-table-column>
        <el-table-column
          prop="balance"
          :label="this.$t('vo.name')"
         >
        </el-table-column>
        <el-table-column
          prop="value"
          :label="this.$t('vo.piaosu')"
         >
          <template slot-scope="scope">
            <span>${{scope.row.value}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          :label="this.$t('vo.rate')"
          align="center">
        </el-table-column>
        <el-table-column
          prop=""
          :label="this.$t('vo.op')"
          label="操作"
          width=""
         align="center">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.checked" size="medium"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop=""
          label=""
          width="20">

        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import {getResource, getTokenBalance} from '../../api/chainApi'

  export default{
    components:{
    },
    data(){false
      return{
        tableData:[
          {checked: true}, {checked:false}
        ],
        datxDetail:'',
        resource: {
          totalResource: "0 DATX",	//已质押资源
          cpuResource: "0 DATX",		//CPU
          cpuUsed: "0 ms",		//cpu资源已用
          cpuTotal: "0 ms",		//cpu资源总量
          netResource: "0 DATX",		//NET
          netUsed: "0 KB",		//net资源已用
          netTotal: "0 KB",		//net资源总量
          ramResource: "0 DATX",		//RAM
          ramUsed: "0 KB",			//ram资源已用
          ramTotal: "0 KB"		//ram资源总量
        },
        allDatx:''

      }
    },
    created() {
      let datxDetail = JSON.parse(window.sessionStorage.getItem("walletdetail"))
      getResource(datxDetail.name).then(res => {
        this.resource = res.data;
      });
      getTokenBalance('DATX', datxDetail.name).then(res => {
        this.allDatx=res.data.balance;
      })
    },
    methods:{
      // 投票
      voteAdd(){
        let arry=[]
        this.tableData.forEach(value => {
          console.log('value')
        })
        arry.push()
        this.$message.success("投票成功")
      }
    }
  }
</script>
<style lang="less" scoped>
.vote{
  .flex{
    display: flex;
  }
  &-title{
    color: rgba(0,0,0,0.6);
    font-size: 30px;
    padding: 25px 0;
    // line-height: 60px;
    display: flex;
    align-items: center;
    span{
      color: #000000;
      font-size: 16px;
      margin-right: 10px;
    }
  }
  &-header{
    margin-bottom: 20px;
    padding: 10px;
    background: #fff;
    min-height: 6px;
    font-size: 20px;
    .nav{
      min-width: 180px;
       padding: 0 20px;
      span{
        display: inline-block;
        padding: 10px 0;
      }
      span:last-child{
        font-size: 18px;
      }
    }
    .navbut{
      padding: 0 20px;
      margin: 15px;
      // 按键样式
      button {
        color: #fff;
        width: 60px;
        border-radius: 4px;
        line-height: 32px;
        text-align: center;
        background-color: #98889b;
        outline: none;
        border: none;
        cursor: pointer;
      }
      button:hover {
        opacity: .8;
      }
    }
    .nav:first-child{
      border-right: 1px solid #eaedf5;
    }
  }
  .table {
    background: #fff;
    .table-title{
      padding: 20px 28px;
      font-size: 22px;
    }
    img {
      width: 28px;
      height: 28px;
      margin-bottom: -9px
    }
    span {
      line-height: 32px;
    }

  }
}
</style>
<style lang="less">
  .vote{
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
      background-color: #98889b;
      border-color: #98889b;
    }
    .el-checkbox__inner:hover{
      border-color: #98889b;
    }
    .el-table__body-wrapper {
      tr {
        height: 70px !important;
      }
    }
  }
</style>


